<template>
    <!-- 布局的容器,搭配使用 -->
    <el-container>

        <!-- 用于定义侧边栏区域 -->
        <el-aside width="200px" class="aside">
            <h2 style="margin-left: 50px;">管理端</h2>

            <!-- 菜单 -->
            <!-- 默认选择index属性为1 -->
            <!-- collapse: 属性用于控制菜单的折叠状态,绑定了自己定义的true false -->
            <el-menu :default-active="activeIndex" class="caidan" :collapse="isCollapse" active-text-color="red" router>

                <!-- el-menu-item每一个菜单项 -->
                <el-menu-item index="/staff">
                    <el-icon><UserFilled /></el-icon>
                    <span>员工管理</span>
                </el-menu-item>

                <el-menu-item index="/users">
                    <el-icon><User /></el-icon>
                    <span>用户管理</span>
                </el-menu-item>

                <el-menu-item index="/managerRecord">
                    <el-icon><icon-menu /></el-icon>
                    <span>选片管理</span>
                </el-menu-item>

                <el-menu-item index="/anMake">
                    <el-icon><Search /></el-icon>
                    <span>预约记录</span>
                </el-menu-item>


                <!-- 下拉菜单 -->
                <el-sub-menu index="#">
                    <!-- 下拉菜单标题 -->
                    <template #title>
                        <el-icon>
                            <Setting />
                        </el-icon>
                        <span>妆造管理</span>
                    </template>

                    <!-- 小标题 -->
                    <el-menu-item-group title="妆造馆管理事项"></el-menu-item-group>

                    <el-menu-item index="/anPhoto">
                        <el-icon :size="15">
                            <Picture />
                        </el-icon>
                        <span>摄影师管理</span>
                    </el-menu-item>

                    <el-menu-item index="/makeManager">
                        <el-icon :size="15">
                            <Crop />
                        </el-icon>
                        <span>妆造师管理</span>
                    </el-menu-item>

                    <el-menu-item index="/styleManager">
                        <el-icon :size="15">
                            <EditPen />
                        </el-icon>
                        <span>妆造风格管理</span>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-aside>



        <!-- 右侧主区域 -->
        <el-container>
            <!-- 头部区域 -->
            <el-header class="header">

                <!-- el-radio-group：创建一组单选框 -->
                <el-radio-group v-model="isCollapse" class="radio">
                    <el-radio-button :value="false">展开</el-radio-button>
                    <el-radio-button :value="true">收起</el-radio-button>
                </el-radio-group>

                

                <!-- ele下拉菜单 -->
                <el-dropdown placement="bottom-end">
                    <span class="user_png">
                        <!-- 模拟数据，目前写死了 -->
                        <strong><span class="user">{{ managerInfo.managerInfo.name }}</span></strong>
                        <el-icon>
                            <CaretBottom />
                        </el-icon>
                    </span>
                    <!-- 下拉菜单中的内容 -->
                    <!-- 具名slot为dropdown 来设置下拉菜单 -->
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item  @click="outLogin" :icon="SwitchButton">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>

            <!-- 中间区域 -->
            <el-main>
                <div class="content">
                    <router-view></router-view>
                </div>
            </el-main>

            <!-- 底部区域 -->
            <el-footer class="footer">妆造馆 (©) 2024</el-footer>
        </el-container>
    </el-container>
</template>

<script setup>
import { ref,computed } from 'vue'
import {
    Menu as IconMenu,
    Crop,
    EditPen,
    Setting,
    Search,
    UserFilled,
    Picture,
    CaretBottom,
    SwitchButton,
    User

} from '@element-plus/icons-vue'

//控制菜单折叠
const isCollapse = ref(false)
//引入路由
import { useRoute } from 'vue-router';
import { managerPiniaInfo } from '@/stores/managerPinia';
const managerInfo =  managerPiniaInfo();
import { ElNotification } from 'element-plus';
//引入路由
import router from '@/router';

//创建实例    
const route = useRoute();
//绑定上面声明的属性，动态改变默认选中按钮
const activeIndex = computed(() => route.path);


const success = () => {
  ElNotification({
    title: 'Success',
    message: '已退出登录',
    type: 'success',
  })
}



//不登录直接退
const isLogin = () => {
    if (managerInfo.managerInfo.id == null) {
        
        router.push('/login')
        ElNotification({
            title: 'Error',
            message: '未登录',
            type: 'error',
        })
    }
}
isLogin()

//退出登录
const outLogin = () => {
      //清空缓存
    managerInfo.removeManagerPinia();
    router.push('/login')
    success()
}

</script>


<style scoped>
/* .el-menu--collapse 类用于控制 el-menu 组件的折叠状态。element中的内置选择器。排除 */
.caidan:not(.el-menu--collapse) {
    width: 200px;
    min-height: 770px;
    /* 确保最小高度 */
    height: 770px;
}

/* 在折叠状态下应用样式 */
.el-menu--collapse {
    width: 64px;
    /* 折叠状态下的宽度 */
    height: 770px;
    /* 折叠状态下的高度 */
    min-height: 770px;
    /* 确保最小高度 */
}


/* 右侧主区域样式 */
.el-header {
    color: #fff;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 控制展开，这贴 */
.el-radio-group {
    margin-left: 25px;
}

/* 名称位置 */
.user {
    margin-left: 20px;
    color: black;
}

.user_png:hover{
    cursor: pointer;
}

.user_png {
    display: flex;
    align-items: center;
    outline: none;
    margin-right: 20px;
}

.el-icon{
    margin-left: 5px;
}

/* 中间区域样式 */
.el-main {
    padding: 20px;
    background-color: #f6f6f6;
    flex: 1;
    overflow: auto;
}

/* 中间显示实际区域 */
.content{
   height: 680px;
   width: 1260px;
   margin-left: 15px;
   border-radius: 10px;
   background-color: white;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* 底部区域样式 */
.el-footer {
    text-align: center;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center; /* 如果需要水平居中子元素 */
    align-items: center; /* 垂直居中子元素 */
    height: 50px; /* 设置一个高度以便看到垂直居中的效果 */
}
</style>